<ui:composition template="/WEB-INF/templates/test-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ats-std="http://java.sun.com/jsf/composite/components/student">

	<ui:define name="main-content">
		<h:form id="stdTabular">

			<p:dataTable id="stds" var="std"  
				value="#{tstStudentsMB.entitiesList}" scrollable="true"
				scrollHeight="150" draggableColumns="true" draggableRows="true"
				resizableColumns="true" rowKey="#{std.id}" selection="#{tstStudentsMB.selectedEtitiesList}"
				rows="5"  paginator="true"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="5,10,15">

				<f:facet name="header">
					<p:commandButton value="New" icon="ui-icon-document"/>
				</f:facet>

			    <p:column selectionMode="multiple" style="width:16px;text-align:center"/>
				<p:column headerText="#{stdMsgs.student_id}">
					<h:outputText value="#{std.studentId}" />
				</p:column>

				<p:column headerText="#{stdMsgs.dob}">
					<h:outputText value="#{std.dob}" />
				</p:column>

				<p:column headerText="#{stdMsgs.name}">
					<h:outputText
						value="#{std.firstName} #{std.fatherName} #{std.grandFatherName} #{std.familyName}" />
				</p:column>

				<p:column headerText="#{stdMsgs.mother_name}">
					<h:outputText value="#{std.motherName}" />
				</p:column>

				<p:column headerText="#{stdMsgs.create_date}">
					<h:outputText value="#{std.createDate}" />
				</p:column>

				<p:column headerText="Actions">
					<p:commandButton validateClient="update" icon="ui-icon-pencil"/>
					<p:commandButton validateClient="delete" icon="ui-icon-trash"/>
				</p:column>

			</p:dataTable>

			<br />
			<br />
			<br />
			<br />
			<br />

			<p:dataTable id="stds2" var="std" filteredValue="#{tstStudentsMB.filteredEtitiesList}"
				value="#{tstStudentsMB.entitiesList}" resizableColumns="true"
				sortMode="multiple" widgetVar="stds2Var"
				emptyMessage="No Data Found.">

				<f:facet name="header">
					<p:outputPanel>
						<h:outputText value="Search all fields:" />
						<p:inputText id="globalFilter" onkeyup="PF('stds2Var').filter()"
							style="width:150px" placeholder="Enter keyword" />
					</p:outputPanel>

					<p:commandButton id="toggler" type="button" value="Columns"
						style="float:right" icon="ui-icon-calculator" />
					<p:columnToggler datasource="stds2" trigger="toggler" />
				</f:facet>

				<p:column headerText="#{stdMsgs.student_id}"
					sortBy="#{std.studentId}" filterBy="#{std.studentId}"
					filterMatchMode="contains">
					<h:outputText value="#{std.studentId}" />
				</p:column>

				<p:column headerText="#{stdMsgs.dob}" sortBy="#{std.dob}">
					<f:facet name="filter">
						<p:calendar onchange="PF('stds2Var').filter()"/>
					</f:facet>
					
					<h:outputText value="#{std.dob}" />
				</p:column>

				<p:column headerText="#{stdMsgs.name}" filterBy="#{std.firstName} #{std.fatherName} #{std.grandFatherName} #{std.familyName}"
					filterMatchMode="contains"
					sortBy="#{std.firstName} #{std.fatherName} #{std.grandFatherName} #{std.familyName}">
					<h:outputText
						value="#{std.firstName} #{std.fatherName} #{std.grandFatherName} #{std.familyName}" />
				</p:column>

				<p:column headerText="#{stdMsgs.mother_name}"
					sortBy="#{std.motherName}">
					<h:outputText value="#{std.motherName}" />
				</p:column>

				<p:column headerText="#{stdMsgs.create_date}"
					sortBy="#{std.createDate}">
					<h:outputText value="#{std.createDate}" />
				</p:column>

			</p:dataTable>


		</h:form>
	</ui:define>

</ui:composition>